<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>BankAmericard Cash Rewards credit card</title>
  <link rel="stylesheet" href="css/jquery.mobile.min.css">
  
  <!-- Extra Codiqa features -->
  	<link rel="stylesheet" href="css/codiqa.ext.css">
	<link rel="stylesheet" href="css/slider.tooltip.css" id="tooltipStyle">
	<link rel="stylesheet" href="css/Allinone.css">
    <link rel="stylesheet" href="css/survey.css">
  <!-- jQuery and jQuery Mobile -->
  	<script src="js/jquery-1.9.1.min.js"></script>
  	<script src="js/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

  <!-- Extra Codiqa features -->
  	<script src="js/codiqa.ext.js"></script>
	<script src="js/slider.tooltip.js" id="tooltipCode"></script>
    <script src="js/iscroll.js"></script>
    <script src="js/survey.js"></script>

</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <div class="ui-grid-b bgclr">
            <div class="ui-block-a">
          	  <a href="#" data-iconpos="right" class="ui-btn-left transBack home"> <img src="images/homeBtn.png" alt="Home"> </a>
            </div>
            <div class="ui-block-b">
            	<div data-role="fieldcontain srch">
         		   <input name="" id="searchinput2" placeholder="" value="" type="search">
      			</div>
            </div>
            <div class="ui-block-c headerleft">
               <a data-role="button" href="#page1" class="ui-btn-right demos transBack">Demos</a>
               <a data-role="button" href="#page1" class="ui-btn-right learn transBack">Library</a>
            </div>
        </div>        
       
        <div class="ui-grid-b topsidpad">
        
         	<h1 class="hmtitle">Survey</h1>

        </div>        
    </div>

    <div data-role="content">
        <div class="ui-grid-a sidpad">
            <div id="wrapper">
                <div id="scroller">
                    <ul id="thelist">
                    
                    
                        <li>
                        <div class="ui-grid-a sidpad">
							<div class="contentTop">
                              <div class="QuestionTop clearfix">
                                  <p>What brought you into the banking center today?</p>
                              </div>
                              <div>
                                  <div class="radioText">
                                      <div>
                                      	<input type="radio" id="Q11" name="Q1" data-role="none"/>
                                        <label for="Q11">
                                      		<p>Teller transaction (e.g., deposit, withdrawal, etc.)</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q12" name="Q1" data-role="none"/>
                                        <label for="Q12">
                                      		<p>Open an account</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q13" name="Q1" data-role="none"/>
                                        <label for="Q13">
                                      		<p>Service an existing account</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q14" name="Q1" data-role="none"/>
                                        <label for="Q14">
                                      		<p>Other</p>
                                      	</label>
                                      </div>
                                  </div>
                              </div>
							</div>
                          	<div class="QuestionBottom">
                                    <div class="imgBox">
                                    <div class="QuestionTop clearfix">
                                  <p>
                                  Which modules did you use on the iPad?
                                  	<br />
                                  (select all that apply)
                                  </p>
                              </div>
                                        <div class="radioText">
                                      <div>
                                      	<input type="radio" id="Q21" name="Q2" data-role="none"/>
                                        <label for="Q21">
                                      		<p>Mobile Banking Demo</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q22" name="Q2" data-role="none"/>
                                        <label for="Q22">
                                      		<p>Online Banking Demo</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q23" name="Q2" data-role="none"/>
                                        <label for="Q23">
                                      		<p>Cash Rewards Calculator</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q24" name="Q2" data-role="none"/>
                                        <label for="Q24">
                                      		<p>Read brochure(s)</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q25" name="Q2" data-role="none"/>
                                        <label for="Q25">
                                      		<p>E-mailed brochures</p>
                                      	</label>
                                      </div>
                                  </div>
                                    </div>
                                    <div class="imgBox1stRight">
                                    <div class="QuestionTop clearfix">
                                  <p>
                                  	Which, if any, products or services will
                                    	<br />
                                  	you enroll in?
                                  </p>
                              </div>
                                        <div class="radioText">
                                      <div>
                                      	<input type="radio" id="Q31" name="Q3" data-role="none"/>
                                        <label for="Q31">
                                      		<p>Mobile Banking</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q32" name="Q3" data-role="none"/>
                                        <label for="Q32">
                                      		<p>Online Banking</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q33" name="Q3" data-role="none"/>
                                        <label for="Q33">
                                      		<p>Cash Rewards</p>
                                      	</label>
                                      </div>
                                  </div>
                                    </div>
                                </div>
                          </div>
                        </li>
                        
                        
                        <li>
                        <div class="ui-grid-a sidpad">
							<div class="contentTop2st">
                              <div class="QuestionTop2st clearfix">
                                  <p>Rate the following statements (1-10, Strongly Disagree to Strongly Agree)</p>
                              </div>
                              <div class="slideBar clearfix">
                              	<p>Because of this experience, I have a better understanding of how the product/service can benefit me.</p>
                                       <div data-role="fieldcontain">
                                            <form>
                                                <div class="sliderBG">
                                                <div class="slider-grid-line"></div>
                                                    <input name="slider-3" id="slider-3" data-highlight="true" min="0" max="10" value="7" type="range" data-theme="b">
                                                </div>
                                            </form>
                                        </div>
                              </div>
                              
                              
                              <div class="slideBar clearfix">
                              	<p>I valued the time I spent experiencing the demonstrations on this device</p>
                                         <div data-role="fieldcontain">
                                              <form>
                                                  <div class="sliderBG">
                                                  <div class="slider-grid-line"></div>
                                                      <input name="slider-3" id="slider-3" data-highlight="true" min="0" max="10" value="9" type="range" data-theme="b">
                                                  </div>
                                              </form>
                                          </div>
                              </div>
							</div>
                          	<div class="QuestionBottom">
                                    <div class="imgBox">
                                    <div class="QuestionTop clearfix">
                                  <p>
                                  Pick the statement that best describes your preference for product demonstrations:
                                  </p>
                              </div>
                                        <div class="radioText">
                                      <div>
                                      	<input type="radio" id="Q41" name="Q4" data-role="none"/>
                                        <label for="Q41">
                                      		<p>I would rather use the product/demonstration myself</p>
                                      	</label>
                                      </div>
                                      <div style="height: 45px;">
                                      	<input type="radio" id="Q42" name="Q4" data-role="none"/>
                                        <label for="Q42">
                                      		<p style="line-height:1.2em;width:23em;">
                                            I would rather the associate demonstrate the product/service for me
                                            </p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q43" name="Q4" data-role="none"/>
                                        <label for="Q43">
                                      		<p>I would rather do the demonstration on my own, at home</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q44" name="Q4" data-role="none"/>
                                        <label for="Q44">
                                      		<p>I prefer the current process; using the demonstration myself</p>
                                      	</label>
                                      </div>
                                      <div>
                                      	<input type="radio" id="Q45" name="Q4" data-role="none"/>
                                        <label for="Q45">
                                      		<p>with an associate here to help</p>
                                      	</label>
                                      </div>
                                  </div>
                                    </div>
                                    <div class="imgBox">
                                    <div class="lowerright">
                                    
                                      <div class="clearfix">
                                          <p>Please share any other feedback on <br /> how we could improve this experience. (optional)</p>
                                          <input type="text"/>
                                      </div>
                                      
                                      <div class="clearfix">
                                          <p>For what other topics would an <br />interactive experience benefit you? (optional)</p>
                                          <input type="text"/>
                                      </div>
                                      
                                      <div class="clearfix">
                                      <!--<button>Submit</button>-->
                                      </div>
                                      
                                   </div>
                                    </div>
                                </div>
                          </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="nav">
                <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false"><button>Previous</button></div>
                
                <div id="next" onclick="myScroll.scrollToPage('next', 0);return false"><button>Next</button></div>
                <div id="answer-all-Q"><p>Please answer all questions before you proceed</p></div>
                <div id="confirmation"><p>Thank you! We appreciate your feedback.</p></div>
                <div id="submit-btn"><button>Submit</button></div>
                <ul id="indicator">
                    <li class="active">1</li>
                    <li>2</li>
                </ul>
            </div>            
            
        </div>        
        
    </div>
    
 
 
 
 
    <div data-theme="a" data-role="footer" data-position="fixed">

        <div class="ui-grid-b footred">
          	<div class="ui-block-a"><a href="#" data-iconpos="right" class="logo"> <img src="images/americard-logo.png" alt="Home"><sup>v2.0</sup> </a></div>
            <div class="ui-block-b"><a href="#" class="fdic">Bank of America, N.A. Member FDIC</a>  </div>
            
            <div class="ui-block-c surblock"><a data-role="button" href="#" class="ui-btn-right transBack survey">Survey</a></div>
           
        </div>
    </div>
</div>

</body>
</html>
